<template>
    <div>
        <div class="loginBox">
            <!-- d登录 -->
            <div class="loginList" @click="Login">
                <div class="loginTx">
                    <img src="../../assets/微信图片_20241124195218.jpg" alt="">
                </div>
                <div class="loginDiv">
                    <div class="loginText">player_15532710801</div>
                    <div class="loginUser">名龙号：15532710801</div>
                </div>
            </div>
            <!-- 优惠券 收藏 -->
            <div class="CouponList">
                <div class="coupon">
                    <div class="couponBox">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/优惠券.png"
                            alt="">
                        <div>优惠券</div>
                    </div>
                    <button>></button>

                </div>
                <div class="Collect">
                    <div class="couponBox">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/收藏.png"
                            alt="">
                        <div>收藏</div>
                    </div>
                    <button>></button>
                </div>
            </div>
            <!-- 我的订单 -->
            <div class="myOrderBox">
                <div class="myOrder">
                    <div class="myOrderText">我的订单</div>
                    <div class=myOrderAll>
                        <div>全部</div>
                        <button>></button>
                    </div>
                </div>
                <div class="iconTextList">
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/待付款.png"
                            alt="">
                        <div>待付款</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/待收货.png"
                            alt="">
                        <div>待收货</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/待评价.png"
                            alt="">
                        <div>待评价</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/退换售后.png"
                            alt="">
                        <div>退还/售后</div>
                    </div>
                </div>
            </div>
            <!-- 我的服务 -->
            <div class="myOrderBox">
                <div class="myOrder">
                    <div class="myOrderText">我的服务</div>
                </div>
                <div class="iconTextList">
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/人工客服.png"
                            alt="">
                        <div>人工客服</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/投诉建议.png"
                            alt="">
                        <div>投诉建议</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/常见问题.png"
                            alt="">
                        <div>常见问题</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/开发票.png"
                            alt="">
                        <div>开发票</div>
                    </div>
                </div>
            </div>
            <!-- 更多服务 -->
            <div class="OrderBox">
                <div class="myOrder">
                    <div class="myOrderText">更多服务</div>
                </div>
                <div class="iconTextList">
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/售后政策.png"
                            alt="">
                        <div>售后政策</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/用户协议.png"
                            alt="">
                        <div>用户协议</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/隐私政策.png"
                            alt="">
                        <div>隐私政策</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/服务商品.png"
                            alt="">
                        <div>服务商品</div>
                    </div>
                    <div class="iconTextlis">
                        <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/new-usercenter/企业团购.png"
                            alt="">
                        <div>企业团购</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="loginTo" v-show="shopShow">
            <div class="toTitle">
                <div class="toTitleLeft" @click="goOutLogin">&lt;</div>
                <div class="toTitleTit">登录</div>
            </div>
            <div class="toCenter">
                <div class="toCenterBgimg">
                    <img class="img1"
                        src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/usercenter/MLOONGBLD.png"
                        alt="">
                    <img class="img2"
                        src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/logo-black.png" alt="">
                    <div class="titleTop">专为游戏玩家提供硬件服务的平台</div>
                </div>
                <div class="toCenterAppgoin">
                    <div class="Applogin">
                        <img src="../../assets/QQ.png" alt="">
                        <div>QQ登录</div>
                    </div>
                    <div class="Applogin">
                        <img src="../../assets/短信登录.png" alt="">
                        <div>短信登录</div>
                    </div>
                    <div class="Applogin">
                        <img src="../../assets/密码-登录.png" alt="" @click="goPass">
                        <div>密码登录</div>
                    </div>
                </div>
                <div class="toCenterOk">
                    <input type="checkbox">
                    <div class="OkText">
                        <div class="TextLeft">我已阅读并同意</div>
                        <div class="TextRight">《服务协议》《隐私政策》</div>
                    </div>
                </div>
                <div class="toCenterMf">
                    <div>免费注册，领取新人优惠</div>
                </div>
            </div>
        </div>
        <div class="passLogin" v-show="shopShow2">
            <div class="toTitle">
                <div class="toTitleLeft" @click="goOutPass">&lt;</div>
                <div class="toTitleTit">密码登录</div>
            </div>
            <div class="passLoginImg">
                <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/logo-black.png" alt="">
            </div>
            <div class="passLoginBox">
                <div class="passInputBox">
                    <div class="inputBoxleft">+86</div>
                    <div class="inputBoxRight">
                        <input type="text" placeholder="输入手机号">
                    </div>
                </div>
                <div class="passInputBox">
                    <div class="inputBoxleft">登录密码</div>
                    <div class="inputBoxRight">
                        <input type="text" placeholder="输入密码">
                    </div>
                </div>
                <button class="btn">立即登录</button>
                <div class="slipPass">忘记密码？</div>
            </div>
        </div>
        <btn1></btn1>
    </div>
</template>
<script>
import { login } from '@/request/api/login'
import btn1 from '../../components/botButton.vue'
export default {
    data() {
        return {
            shopShow: false,
            shopShow2: false,
        }
    },
    components: {
        btn1
    },
    methods: {
        goOutLogin() {
            this.shopShow = !this.shopShow
        },
        Login() {
            this.shopShow = !this.shopShow
        },
        goOutPass() {
            this.shopShow2 = !this.shopShow2
        },
        goPass() {
            this.shopShow2 = !this.shopShow2
        },
        async logins() {
            this.$refs.forms.validate(async (valid) => {
                console.log(valid);
                if (valid) {
                    let res = await login('/login', {
                        username: this.form.name,
                        password: this.form.pwd,
                    })
                    console.log('res', res);

                    let { token } = res.data.data
                    localStorage.setItem('token', token)

                    // 页面跳转
                    this.$router.push({
                        path: '/home/userList'
                    })

                } else {
                    console.log('错误');

                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("../../../src/assets/scss/reset.scss");

// 登录主页面
.loginBox {
    background: #eee;
    height: 12rem;
    padding: 0.3rem 0.4rem 0 0.4rem;

    // 头像
    .loginList {
        display: flex;
        margin-bottom: 0.3rem;

        .loginTx {
            img {
                width: 1.2rem;
                height: 1.2rem;
                margin-right: 0.2rem;
                border-radius: 50%;
            }
        }

        .loginDiv {
            .loginText {
                // line-height: 1.2rem;
                font-size: 0.3rem;
                font-weight: bold;
                margin-bottom: 0.2rem;
            }
        }


    }

    // 优惠券 收藏
    .CouponList {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .coupon,
        .Collect {
            width: 3.2rem;
            height: 1rem;
            background: #fff;
            border-radius: 0.2rem;
            display: flex;

            .couponBox {
                display: flex;
                width: 2.4rem;
                margin-top: 0.2rem;
                margin-left: 0.1rem;

                div {
                    margin-top: 0.05rem;
                    font-size: 0.3rem;
                    margin-left: 0.1rem;
                }

                img {
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }

            button {
                width: 0.4rem;
                height: 0.4rem;
                border-radius: 0.1rem;
                margin-top: 0.25rem;
            }
        }
    }

    // 我的订单
    .myOrderBox {
        width: 90%;
        height: 1.6rem;
        background: #fff;
        margin-top: 0.4rem;
        border-radius: 0.2rem;
        padding: 0.2rem 0.3rem;

        .myOrder {
            width: 100%;
            display: flex;

            .myOrderText {
                width: 5.6rem;
                font-size: 0.3rem;
                font-weight: bold;
            }

            .myOrderAll {
                width: 1rem;
                display: flex;

                div {
                    margin-right: 0.1rem;
                    color: #ccc;
                }

                button {
                    width: 0.3rem;
                    height: 0.3rem;
                    border-radius: 0.05rem;
                }
            }
        }

        .iconTextList {
            display: flex;
            justify-content: space-between;
            margin-top: 0.2rem;

            .iconTextlis {
                text-align: center;

                img {
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }
        }
    }

    // 更多服务
    .OrderBox {
        width: 90%;
        height: 3rem;
        background: #fff;
        margin-top: 0.4rem;
        border-radius: 0.2rem;
        padding: 0.2rem 0.3rem;

        .myOrder {
            width: 100%;
            display: flex;

            .myOrderText {
                width: 5.6rem;
                font-size: 0.3rem;
                font-weight: bold;
            }

            .myOrderAll {
                display: flex;

                div {
                    margin-right: 0.1rem;
                    color: #ccc;
                }

                button {
                    width: 0.3rem;
                    height: 0.3rem;
                    border-radius: 0.05rem;
                }
            }
        }

        .iconTextList {
            display: flex;
            justify-content: space-between;
            margin-top: 0.2rem;

            .iconTextlis {
                text-align: center;

                img {
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }
        }
    }
}

// 登录第一个遮罩层
.loginTo {
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;

    .toTitle {
        display: flex;
        padding: 0.2rem 0.3rem;

        .toTitleTit {
            margin-left: 3rem;
            font-size: 0.3rem;
        }
    }

    .toCenter {
        padding: 0 0.75rem;
        height: 4rem;
        // line-height: 4rem;

        .toCenterBgimg {
            height: 4.2rem;

            .img1 {
                width: 6rem;
                height: 0.7rem;
                position: relative;
                margin-top: 1.6rem;
            }

            .img2 {
                width: 3rem;
                height: 0.55rem;
                position: absolute;
                top: 3rem;
                left: 2.2rem;
            }

            .titleTop {
                text-align: center;
                margin-top: 0.7rem;
                font-size: 0.3rem;
            }

        }

        .toCenterAppgoin {
            width: 100%;

            .Applogin {
                width: 100%;
                height: 0.7rem;
                border: 0.02rem solid #999;
                line-height: 0.7rem;
                display: flex;
                margin-bottom: 0.4rem;

                img {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #333;
                    margin-top: 0.1rem;
                    margin-left: 2.5rem;
                    background-color: #fff;
                }
            }
        }

        .toCenterOk {
            padding-top: 1rem;
            display: flex;

            input {
                margin-right: 0.1rem;
            }

            .OkText {
                display: flex;
                color: #999;

                .TextRight {
                    text-decoration: underline
                }
            }
        }

        .toCenterMf {
            width: 100%;
            text-align: center;
            margin-top: 0.7rem;

            div {
                color: rgb(253, 197, 180);
                text-decoration: underline
            }
        }
    }
}

// 登录第二个遮罩层密码登录
.passLogin {
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;

    .toTitle {
        display: flex;
        padding: 0.2rem 0.3rem;

        .toTitleTit {
            margin-left: 3rem;
            font-size: 0.3rem;
        }
    }

    .passLoginImg {
        margin: 1rem 0 1rem 1rem;

        img {
            width: 2.6rem;
        }
    }

    .passLoginBox {
        margin: 0 1rem 0 1rem;

        .passInputBox {
            display: flex;
            height: 0.8rem;
            border-bottom: 0.01rem solid #eee;
            line-height: 1.1rem;
            margin-bottom: 0.2rem;

            .inputBoxleft {
                width: 1.3rem;
            }

            .inputBoxRight {
                font-size: 0.26rem;

                input[type=text]::placeholder {
                    color: #ccc;
                }

            }
        }

        .btn {
            width: 5.5rem;
            height: 0.8rem;
            font-size: 0.28rem;
            color: #fff;
            background: rgb(250, 94, 46);
            margin-top: 0.4rem;
        }

        .slipPass {
            text-align: right;
            margin-top: 0.6rem;
        }
    }
}
</style>